{% extends "nav.html" %}
{% block little %}存储光交综合管理系统系统-存储信息{% endblock %}
{% block content %}
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">
            <div class="page-title">
                <span class="title">存储信息查看</span>
                <div class="description">存储使用率图表展示</div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div id="storage_tubiao" class="col-xs-12"  style="height:600px;"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function(){
            var name = []
            var totalnum = []
            var usewap = []
            var totaluse = []
            {% for i in data  %}
                name.push("model:{{ i.ST_prodect }}({{ i.ST_sn }})")
                totalnum.push("{{ i.ST_totalrawcap }}")
                usewap.push("{{ i.ST_usecap }}")
                totaluse.push("{{ i.ST_availcap }}")
            {% endfor %}
            var option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:['裸容量','可用容量','已用容量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : name,
                        default:'start',
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'可用容量',
                        type:'bar',
                        data:totaluse,
                    },
                    {
                        name:'已用容量',
                        type:'bar',
                        stack: '（T）',
                        data:usewap,
                    },
                    {
                        name:"裸容量",
                        type:'bar',
                        data:totalnum,
                        markLine : {
                            lineStyle: {
                                normal: {
                                    type: 'dashed'
                                }
                            },
                            data : [
                                [{type : 'min'}, {type : 'max'}]
                            ]
                        }
                    },

                ]
            };
            var myChart = echarts.init(document.getElementById('storage_tubiao'));
            myChart.setOption(option);
        });
    </script>
{% endblock %}
